


import React, { useCallback, useEffect, useMemo } from 'react'

import VCard from '../../../components/VCard'

import { Form, Spin, message } from 'antd'
import { getUseInfoList } from '../../Statistics/VehicleUsageStats/service'
import SearchForm from '../../../components/SearchForm'
import { ExportToExcel } from '../../../utils/export'
import { start } from 'repl'


interface RequestRecordType {
  status: string
  count: number
}
export default function RequestRecords() {
  const [form] = Form.useForm();
  // const PieOption = () => {
  //   return {
  //   title: {
  //     text: '驾驶员状态一览',

  //     left: 'center'
  //   },
  //   tooltip: {
  //     trigger: 'item'
  //   },
  //   legend: {
  //     orient: 'vertical',
  //     left: 'left'
  //   },
  //   series: [
  //     {
  //       bottom: 'bottom',
  //       right: 'right',
  //       name: 'name',
  //       type: 'pie',
  //       radius: '50%',
  //       data: 
  //         driverStatus.map(item => {
  //           return {
  //             value: item.count,
  //             name: item.status
  //           }
  //         })
  //       ,
  //       emphasis: {
  //         itemStyle: {
  //           shadowBlur: 10,
  //           shadowOffsetX: 0,
  //           shadowColor: 'rgba(0, 0, 0, 0.5)'
  //         }
  //       }
  //     }
  //   ]
  // }}
  const [useInfo, setUseInfo] = React.useState<any[]>([])
  const [filterData, setFilterData] = React.useState<any[]|null>(null)
  const [loading, setLoading] = React.useState(false)

  // private Integer driver_id;
  // private String driver_name;
  // private String status;
  // private String phone;
  // /** 身份证 */
  // private String id;
  // /** 驾驶证 */
  // private String license_id;
  const columns=[
    {
      title: '申请编号',
      dataIndex: 'use_id',

    },
    {
      title: '驾驶员编号',
      dataIndex: 'driver_id',

    },
    {
      title: '车辆编号',
      dataIndex: 'vehicle_id',
      search:true,


    },
    {
      title: '开始时间',
      dataIndex: 'start_time',

    },
    {
      title: '结束时间',
      dataIndex: 'end_time',

    },
    {
      title: '目的地',
      dataIndex: 'destination',
      ellipsis: true

    },
    {
      title: '用车原因',
      dataIndex: 'reason',
      ellipsis: true
    }
   
  ]

  const queryList = async () => {
    setLoading(true)
    await getUseInfoList().then(res => {
      setUseInfo(res.data.data)
    })

    setLoading(false)
  }
  useEffect(() => {
    queryList()
  }, [])
  return (
    <div className="page-content-container">
    <div className="page-title-container">
      <div className="page-title">用车申请记录</div>
    </div>
    <div className="page-content">
      {/* <VTable></VTable> */}
      {/* <VCard type="card"></VCard> */}
      <Spin spinning={loading}>
        <SearchForm
          form={form}
          exportToExcel={()=>{
            ExportToExcel('/api/use/export','车辆出车信息.xlsx')
          }
            
           }
          params={[
            { type: 'date', name: 'date', label: '时间' }
          ]}
          onFinsh={()=>{
            const values = form.getFieldsValue();
            const params:{start_time?:string,end_time?:string} = {};
            if(values.date){
              params.start_time = values.date[0].format('YYYY-MM-DD');
             params.end_time = values.date[1].format('YYYY-MM-DD');
              const filteredData = useInfo.filter(item => {
                const startDate = params.start_time as string;
                const endDate =  params.end_time as string;
                const startDate1 = item.start_time
                const endDate1 = item.end_time
                console.log(startDate1,startDate,endDate1,endDate);
                return startDate1 >= startDate && endDate1 <= endDate;
            });
            setFilterData(filteredData);
            }
            else{
              setFilterData(null);
            }
            console.log(values,params);
            // await ...
            
          }}
        />
        <div className="VCard-list">

        <VCard title={'出车信息'} type={'table'} columns={columns} dataSource={filterData||useInfo}></VCard>
        </div>

      </Spin>
    </div>
  </div>
  )
}
